<template>
	<view class=" tn-gradient-bg__indigo-single">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tn-navbar>商户管理</tn-navbar>
				<tn-input v-model="inputValue" placeholder="请输入商户名称">
					<template #suffix>
						<view class="tn-ml tn-mr" @click="filterData"><tn-icon name="search" color=" tn-gray_bg"></tn-icon></view>
					</template>
				</tn-input>
			</template>
			<view class="tn-p tn-gradient-bg__indigo-single">
				<view v-for="(item, index) in dataList" :key="index" class="tn-shadow-md tn-p tn-mb tn-radius tn-black_text tn-white_bg ">
					<view class="tn-flex justify-between justify-start tn-mb-sm">
						<view>
							<tn-button type="primary" shape="circle">停</tn-button>
							<text class="tn-text-xl tn-text-bold tn-ml-sm">{{ item.name }}</text>
						</view>
						<text class="tn-round tn-white_text tn-orangeyellow_bg    tn-text-bold tn-pt-xs  tn-pb-xs tn-pr-sm tn-pl-sm">{{ item.type }}</text>
					</view>
					<view class="coupon-details tn-mt tn-pt tn-pl-0 tn-pr-0 tn-ml-0 tn-mr-0">
						<view class="tn-flex justify-between tn-mb-sm">
							<text>
								<tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
								余额
							</text>
							<text>{{ item.price }} 元/小时</text>
						</view>
						<view class="tn-flex justify-between tn-mb-sm">
							<text>
								<tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
								折扣：
							</text>
							<text>{{ item.price }} 元/小时</text>
						</view>
					</view>
					<view class="tn-flex   tn-flex-wrap tn-mt-sm">
						<view class="tn-flex justify-around">
							<view class="tn-m-xs">
								<tn-button :shadow="true" shadow-color="tn-grey" border border-color="tn-grey" bg-color="tn-white" @click="openEditPopupCoupon">
									<tn-icon name="coupon" size="30" color="tn-blue"></tn-icon>
									优惠券
								</tn-button>
							</view>
							<view class="tn-m-xs">
								<tn-button :shadow="true" shadow-color="tn-grey" bg-color="tn-white" @click="openEditPopupRecharge">
									<tn-icon name="payment-wechat" size="30" color="tn-teal-dark"></tn-icon>
									充值
								</tn-button>
							</view>

							<view class="tn-m-xs">
								<tn-button :shadow="true" shadow-color="tn-grey" bg-color="tn-white" @click="openEditPopupRefund">
									<tn-icon name="refund" size="30" color="tn-orange"></tn-icon>
									退款
								</tn-button>
							</view>

							<view class="tn-m-xs">
								<tn-button :shadow="true" shadow-color="tn-grey" bg-color="tn-white" @click="editMerchant(item.id)">
									<tn-icon name="edit-write-fill" size="30"></tn-icon>
									编辑
								</tn-button>
							</view>
						</view>
						<view class="tn-flex justify-around">
							<view class="tn-m-xs">
								<tn-button :shadow="true" shadow-color="tn-grey" bg-color="tn-white" @click="cfsheep.$router.go('/pages/main/merchant/operationUser',{id:item.id})">
									<tn-icon name="my-lack" size="30"></tn-icon>
									操作员
								</tn-button>
							</view>

							<view class="tn-m-xs">
								<tn-button :shadow="true" shadow-color="tn-grey" bg-color="tn-white" @click="deleteMerchantModal(item.id)">
									<tn-icon name="delete" size="30" color="tn-red"></tn-icon>
									删除
								</tn-button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<template #loadingMoreNoMore></template>
		</z-paging>
	</view>
	<view>
		<!-- 悬浮按钮 -->
		<tn-suspend-button icon="add" size="sm" text-color="tn-white" bg-color="tn-gradient-bg__cool-5" @click="addMerchant" />
		<!-- 充值弹框 -->
		<tn-popup v-model="isPopupRecharge" width="90%" open-direction="center" @close="closePopupRecharge" close-btn :overlay-closeable="false">
			<view class="tn-m-sm tn-p-sm">
				<view class="tn-mb-xl"><tn-title size="lg" title="充值" mode="hLine" sub-title="Recharge" assist-color="tn-blue" /></view>
				<tn-form ref="formRef" :model="formDataRecharge" label-position="top">
					<tn-form-item label="所属车场"><tn-input v-model="formDataRecharge.parkingLotName" disabled></tn-input></tn-form-item>
					<tn-form-item label="商家名称"><tn-input v-model="formDataRecharge.carPlate" disabled></tn-input></tn-form-item>
					<tn-form-item label="折扣"><tn-input v-model="formDataRecharge.remark" disabled></tn-input></tn-form-item>
					<tn-form-item label="充值金额"><tn-input v-model="formDataRecharge.remark"></tn-input></tn-form-item>
					<tn-form-item label="实收金额"><tn-input v-model="formDataRecharge.remark"></tn-input></tn-form-item>
					<tn-form-item label="备注"><tn-input v-model="formDataRecharge.remark"></tn-input></tn-form-item>
					<view class="tn-flex justify-between">
						<tn-button :shadow="true" shadow-color="tn-grey" @click="confirmEditRecharge" size="lg" width="100%" bg-color="tn-blue">确认</tn-button>
					</view>
				</tn-form>
			</view>
		</tn-popup>
		<!-- 退款弹框 -->
		<tn-popup v-model="isPopupRefund" width="90%" open-direction="center" @close="closePopupRefund" close-btn :overlay-closeable="false">
			<view class="tn-m-sm tn-p-sm">
				<view class="tn-mb-xl"><tn-title size="lg" title="退款" mode="hLine" sub-title="Refund" assist-color="tn-blue" /></view>
				<tn-form ref="formRef" :model="formDataRefund" label-position="top">
					<tn-form-item label="所属车场"><tn-input v-model="formDataRefund.parkingLotName" disabled></tn-input></tn-form-item>
					<tn-form-item label="商家名称"><tn-input v-model="formDataRefund.carPlate" disabled></tn-input></tn-form-item>

					<tn-form-item label="账户余额"><tn-input v-model="formDataRefund.remark" disabled></tn-input></tn-form-item>
					<tn-form-item label="退款金额"><tn-input v-model="formDataRefund.remark"></tn-input></tn-form-item>
					<tn-form-item label="备注"><tn-input v-model="formDataRefund.remark"></tn-input></tn-form-item>
					<view class="tn-flex justify-between">
						<tn-button :shadow="true" shadow-color="tn-grey" @click="confirmEditRefund" size="lg" width="100%" bg-color="tn-blue">确认</tn-button>
					</view>
				</tn-form>
			</view>
		</tn-popup>
		
		<!-- 退款弹框 -->
		<tn-popup v-model="isPopupCoupon" width="90%" open-direction="center" @close="closePopupCoupon" close-btn :overlay-closeable="false">
			<view class="tn-m-sm  tn-mb-xl ">
				<view class=" "><tn-title size="lg" title="优惠券" mode="hLine" sub-title="Coupon" assist-color="tn-blue" /></view>
				   <view class="coupon-list">
				     <view v-for="(coupon, index) in coupons" :key="index" class="coupon-item">
				       <view class="coupon-info">
				         <text class="coupon-name">{{ coupon.name }}</text>
				         <text class="coupon-details">
				           单价: {{ coupon.price }} | 额度: {{ coupon.duration }} | 类型: {{ coupon.type }}
				         </text>
				       </view>
					   <tn-switch v-model="coupon.enabled" size="sm" @change="changeCouponSwitch(coupon.id,$event)"/>
				       <!-- <switch :checked="coupon.enabled" @change="toggleCoupon(index)" color="#2196F3" /> -->
				     </view>
				   </view>
			</view>
		</tn-popup>
		<!-- 删除弹框 -->
		<tn-modal ref="modalRef" />
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";
import { COUPON_TYPE, COUPON_UNITS } from "@/utils/dict"; // 引入计费方式和车型字典
import { onLoad } from "@dcloudio/uni-app";
import cfsheep from "@/cfsheep";
import type { TnModalInstance } from '@/uni_modules/tuniaoui-vue3';
// ===============模拟数据 =========================

// 模拟数据
const tempList = ref([]);

// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList = ref();

const queryList = (pageNo, pageSize) => {
	// 模拟数据

	for (let i = 0; i < 10; i++) {
		tempList.value.push({
      id:i,
		name: "停车场"+i,
		type: "停车金额减免",
		duration: { value: 3, unit: "小时" },
		amount: "3小时",
		price: 2,
	});
	}
	paging.value.complete(tempList.value);
};

// ===========================================
// 充值操作-充值弹框
const isPopupRecharge = ref(false);
// 充值操作-充值表单
const formDataRecharge = ref({
	parkingLotName: null,
	couponType: "",
	couponUnits: "",
	ownerPhone: "",
	address: "",
	billingMethod: "",
	unitPrice: "",
	quantity: "",
	balance: "",
	amountReceivable: "",
	amountReceived: "",
	validityStart: "",
	validityEnd: "",
	carType: "",
	remarks: "",
	noRenewal: null,
});
// 充值操作-显示弹框
const openEditPopupRecharge = ()=>{
  isPopupRecharge.value = true;
}
// 充值操作-关闭弹框
const closePopupRecharge= () => {
	isPopupRecharge.value = false;
};

// 充值操作-提交充值
const confirmEditRecharge = () => {
	console.log(formData.value);
	// 确认修改逻辑
	closePopupRecharge();
};


// 退款操作-退款弹框
const isPopupRefund = ref(false);
// 退款操作-退款表单
const formDataRefund = ref({
	parkingLotName: null,
	couponType: "",
	couponUnits: "",
	ownerPhone: "",
	address: "",
	billingMethod: "",
	unitPrice: "",
	quantity: "",
	balance: "",
	amountReceivable: "",
	amountReceived: "",
	validityStart: "",
	validityEnd: "",
	carType: "",
	remarks: "",
	noRenewal: null,
});
// 退款操作-弹框显示
const openEditPopupRefund  = ()=>{
  isPopupRefund.value = true;
}
// 退款操作-弹框关闭
const closePopupRefund = () => {
	isPopupRefund.value = false;
};

// 退款操作-提交退款
const confirmEditRefund  = () => {
	console.log(formData.value);
	// 确认修改逻辑
	closePopupRefund();
};

//===========优惠券操作 ==================
const  coupons = ref( [])
const getCouponList = async ()=>{
	coupons.value=[
	        { id:1,name: "周末特惠券", price: "1元", duration: "3小时", type: "时间减免", enabled: true },
	        { id:2,name: "工作日优惠", price: "1元", duration: "3小时", type: "时间减免", enabled: true },
	        {id:3, name: "节日庆典券", price: "1元", duration: "3小时", type: "时间减免", enabled: true },
	        {id:4, name: "新用户体验券", price: "1元", duration: "3小时", type: "时间减免", enabled: true }
	      ]
};

// 优惠券操作-优惠券弹框
const isPopupCoupon = ref(false);
 
// 优惠券操作-弹框显示
const openEditPopupCoupon  = ()=>{
	getCouponList();
  isPopupCoupon.value = true;
};
// 优惠券操作-弹框关闭
const closePopupCoupon = () => {
	isPopupCoupon.value = false;
};

// 优惠券操作-启用关闭
const changeCouponSwitch  = (id,value: String | Number | Boolean) => {
	// 模拟关闭操作
	cfsheep.$helper.toast((value?'启用':'关闭') +'操作成功');
	console.log(id,value);
	// 刷新优惠券列表
	
};

// 商户操作-商户新增
const addMerchant = () => {
	cfsheep.$router.go('/pages/main/merchant/managementModal')
};
// 商户操作-商户编辑
const editMerchant = (id:String) => {
	cfsheep.$router.go('/pages/main/merchant/managementModal',{id:id})
};
// 商户操作-商户删除ref
const modalRef = ref<TnModalInstance>();

// 商户操作-商户删除弹框确认
const deleteMerchantModal = (id:String) => {

    modalRef.value?.showModal({
    title:'提示',
    content: '是否删除商户',
    confirmText: '确定',
    cancelText: '取消',
    showCancel: true,
    cancel: () => {

      return true;

    },
    confirm: () => {
      deleteMerchant(id);
    },
  })
};
// 商户操作-商户删除
const deleteMerchant =  (id:String) => {
    // 删除记录逻辑

    paging.value.reload(true);
};
const  findBtn =()=>{

  paging.value.reload(true);

}

// 字典枚举映射
const pickerDict = ref({
	dict: {
		couponUnits: COUPON_UNITS,
		couponType: COUPON_TYPE,
	},
	label: {},
});

// 处理pickerDict.value 内的字典数据格式为 {billingMethod:{value:label}}
const getDictLabel = () => {
	pickerDict.value.label = {};
	for (let key in pickerDict.value.dict) {
		let dict = pickerDict.value.dict[key];
		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
			acc[cur.value] = cur.label || cur.text;
			return acc;
		}, {});
	}
};

// 表单数据模型
const formData = ref({
	parkingLotName: null,
	couponType: "",
	couponUnits: "",
	ownerPhone: "",
	address: "",
	billingMethod: "",
	unitPrice: "",
	quantity: "",
	balance: "",
	amountReceivable: "",
	amountReceived: "",
	validityStart: "",
	validityEnd: "",
	carType: "",
	remarks: "",
	noRenewal: null,
});

onLoad(() => {
	getDictLabel();
});
</script>
<style lang="scss" scoped>
.coupon-details {
	border-top: 1px dashed rgba(12, 12, 12, 0.5);
	border-bottom: 1px dashed rgba(10, 10, 10, 0.5);
}

.coupon-footer {
	font-size: 14px;
	text-align: center;
	opacity: 0.8;
}



.coupon-list {
  background-color: #ffffff;  
  width: 100%; 
}

.coupon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.coupon-item:last-child {
  border-bottom: none;
}

.coupon-info {
  flex-grow: 1;
}

.coupon-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.coupon-details {
  font-size: 14px;
  color: #666;
}
</style>
